<template>
    <div>
      <h1>字符串拼接示例</h1>
      <input type="text" v-model="input1" placeholder="输入第一个字符串" />
      <input type="text" v-model="input2" placeholder="输入第二个字符串" />
      <input type="text" v-model="input3" placeholder="输入第三个字符串" />
      <p>拼接结果: {{ concatenatedString }}</p>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  
  const input1 = ref('');
  const input2 = ref('');
  const input3 = ref('');
  
  const concatenatedString = computed(() => {
    return `${input1.value} ${input2.value} ${input3.value}`.trim();
  });
  </script>
  
  <style scoped>
  input {
    margin: 5px 0;
    display: block;
  }
  </style>
  